<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>

</body>
//JavaScript原生方式
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function () {
        console.log("event to take effect");
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();
        //3.打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET", "userServlet?username=" + username, true);
        //4.发送请求
        xmlHttp.send();
        //5.处理响应
        xmlHttp.onreadystatechange = function () {
            console.log("enter func");
            //判断请求和响应是否成功
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
                console.log("modify span");
            }
        }
    }
</script>
</html>